<template>
  <div class="detail-box">
    <van-nav-bar
      title="申领试用"
    />
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" class="swipe-img" />
      </van-swipe-item>
    </van-swipe>
    <div class="content">
      <p class="content-title">
        法国碧欧泉法国碧欧泉法国碧欧泉法国碧欧泉法国碧欧泉法国碧欧泉法国碧欧泉法国碧欧泉!
      </p>
      <div class="content-progress">
        <p class="content-top">已报名35人</p>
        <van-row>
          <van-col span="4">限额人数</van-col>
          <van-col span="16" class="content-progress-col">
            <van-progress
              pivot-text=""
              color="#D27D00"
              :percentage="35"
              class="content-progress-item"
            />
          </van-col>
          <van-col span="4">100人</van-col>
        </van-row>
      </div>
      <div class="van-hairline--bottom"></div>
      <div class="time-line">
        <span>时间</span>
        <span>2018.6.1 12:00:00 - 2018.6.1 12:00:00</span>
      </div>
    </div>

    <div class="desc">
      <span class="desc-title">
        <span>资格说明</span>
      </span>
      <div class="desc-content">
        参加人员须在24小时之内进入个人中心参加人员须在24小时之内进入个人中心参加人员须在24小时之内进入个人中心参加人员须在24小时之内进入个人中心参加人员须在24小时之内进入个人中心参加人员须在24小时之内进入个人中心参加人员须在24小时之内进入个人中心参加人员须在24小时之内进入个人中心
      </div>
    </div>
  </div>
</template>

<script>
import { Row, Col, Button, Cell, NavBar, Swipe, SwipeItem, Icon, Progress } from 'vant';
export default {
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Button.name]: Button,
    [Cell.name]: Cell,
    [NavBar.name]: NavBar,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Icon.name]: Icon,
    [Progress.name]: Progress,
  },
  data () {
    return {
      images: [
        'https://img.yzcdn.cn/2.jpg',
        'https://img.yzcdn.cn/2.jpg'
      ]
    }
  },
  mounted() {

  },
  methods: {
  },
}
</script>

<style scoped>
p {
  margin: 0;
}
[class*=van-hairline]::after {
  border-color: #999;
}
.detail-box {
  background-color: #F7F8FA;
  height: 100vh;
  overflow: auto;
}
.van-nav-bar__title {
  font-size: 14px!important;
}
.swipe-img {
  width: 100%;
}
.content,
.desc {
  padding: 10px;
  font-size: 14px;
  background-color: #fff;
  margin-bottom: 10px;
}
.content-progress {
  position: relative;
  padding: 30px 0 20px 0;
  font-size: 12px;
}
.content-top {
  position: absolute;
  top: 15px;
  left: 18.666667%;
  font-size: 12px;
  color: #D27D00;
}
.content-progress-col {
  padding: 3px;
}
.content-progress-item {
  width: 100%;
  height: 10px;
}
.time-line {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 10px 0 0 0;
  font-size: 12px;
}
.desc {
  color: #333;
}
.desc-title {
  position: relative;
  line-height: 20px;
}
.desc-title:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10px;
  background-color: #EEDECA;
}
.desc-title span {
  position: relative;
  z-index: 1;
}
.desc-content {
  font-size: 12px;
  padding: 10px 0;
}
</style>
